<template>
  <div>
    <el-dialog
      :title="item.id ? '编辑模板' : '新增模板'"
      :visible.sync="editVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="任务模板：" required>
          <el-input v-model="form.name" placeholder="请输入模板名称" clearable />
        </el-form-item>
        <el-form-item label="任务频次：" required>
          <el-radio-group v-model="form.frequency" @change="handleFrequency">
            <el-radio label="monthly">按月</el-radio>
            <el-radio label="once">一次性</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="任务类型：">
          <el-radio-group v-model="form.frequency">
            <el-radio label="monthly">按月</el-radio>
            <el-radio label="once">一次性</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="数据模板：" required>
          <el-select v-model="form.sheet_template_id" style="width: 100%;" placeholder="请选择数据模板" clearable filterable>
            <el-option v-for="report in reportTemplateList" :key="report.id" :label="report.description" :value="report.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务描述：" required>
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
        <el-form-item label="上传附件：">
          <el-upload
            class="upload-demo"
            :action="`${hostApi}/utils/upload`"
            :on-preview="handlePreview"
            :on-change="handleChange"
            :on-success="handleSuccess"
            :before-remove="beforeRemove"
            :limit="1"
            :headers="dataObj"
            :file-list="fileList"
          >
            <el-button size="small">上传文件</el-button>
            <div slot="tip" class="el-upload__tip">支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过20MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button v-preventReClick="3000" type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { taskTemplateCreate, getDataTemplate, taskTemplateUpdata } from '@/api/table'
export default {
  props: {
    editVisible: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {
        name: '',
        frequency: '',
        description: '',
        sheet_template_id: '',
        attachment: {}
      },
      // http://161.189.177.174:18080
      // http://192.168.0.69:20002
      // hostApi: 'http://192.168.0.69:20002/api',
      hostApi: `${process.env.VUE_APP_BASE_API}/api`,
      dataObj: {
        Authorization: `Bearer ${this.$store.getters.token}`
      },
      reportTemplateList: [],
      fileList: [],
      fileArr: []
    }
  },
  // created() {
  //   if (this.item.id) {

  //   }
  // },
  mounted() {
    // this.getReportTemplate()
    if (this.item.id) {
      this.form = { ...this.item }
      this.handleFrequency(this.item.frequency)
      if (this.item.attachment) {
        this.fileList.push(this.item.attachment)
      }
    }
  },
  methods: {
    onSubmit() {
      if (this.item.id) {
        taskTemplateUpdata(this.form).then(res => {
          if (res.status === 200) {
            this.$emit('changeResult', true)
          }
          console.log(res, '--------------------res')
        })
      } else {
        taskTemplateCreate(this.form).then(res => {
          if (res.status === 200) {
            this.$emit('changeResult', true)
          }
          console.log(res, '--------------------res')
        })
      }
      console.log('submit!')
    },
    handleFrequency(val) {
      this.getReportTemplate(val)
    },
    getReportTemplate(val) {
      getDataTemplate({ page: 1, per_page: 1000, type: 1, frequency: val }).then(res => {
        this.reportTemplateList = res.data
        console.log(res, '------------------res')
      })
    },
    handlePreview(file) {
      console.log(file)
    },
    handleChange(file, fileList) {
      // let formData = new FormData()
      // formData.append('file', file)
      // console.log(file, fileList, '--------------------------handleChange')

    },
    handleSuccess(file, fileList) {
      if (file.status === 200) {
        this.form.attachment = file.data
      }
      console.log(this.fileList, '--------------------------------this.fileArr')
      // this.$emit('input', this.fileArr)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleClose() {
      this.$emit('changeResult', false)
    }
  }
}
</script>
